<template>
	<div class="dialog-wrap">
		<div class="dialog-bg"></div>
		<div class="dialog-header">
			<i :class="iconClass" class="tip-icon"></i>{{operate}}成功
			<i class="close-icon" @click="close"></i>
		</div>
		<div class="dialog-content">
			<div class="qrcode-img-wrap">
			</div>
			<div class="dialog-content-tips">{{operateTips}}</div>
		</div>
	</div>
</template>

<script>
	export default{
		name:"dialog",
		props:{
			iconClass:{
				type:String,
				value:'follow-icon'
			},
			operate:{
				type:String,
				value:'关注'
			},
			operateTips:{
				type:String,
				value:'已成功关注老师,查看关注内容,请使用浏览器扫码下载app'
			}
		},
		methods:{
			close(){
				this.$emit("hide");
			}
		},
		mounted(){
			$(".qrcode-img-wrap").qrcode({
	        	width:162,
	        	height:162,
	        	text:"https://vend.1234tv.com/app/download"
	      	})
		}
	}
</script>

<style scoped="">
	.dialog-wrap{width: 300px;font-family: "microsoft yahei";font-size: 14px; color: rgb(90,90,90);background-color: #fff;}
	.dialog-header{position:relative;padding:0 16px;line-height:50px ;background-color: #487af5;color: #fff;font-size: 16px;}
	.tip-icon{display: inline-block;width:18px;margin-right:10px;vertical-align: -2px;}
	.follow-icon{height: 16px;background:url(../../assets/images/follow-star.png);background-size:contain;}
	.zan-tip-icon{height: 19px;background:url(../../assets/images/zan-tip-icon.png);background-size:contain;}
	.collect-tip-icon{height: 17px;background:url(../../assets/images/collect-tip-icon.png);background-size:contain;}
	.close-icon{position: absolute;width:18px;height: 18px;background: url(../../assets/images/close-icon.png);background-size: contain;top: 0;bottom: 0;margin: auto;right: 14px;cursor: pointer;}
	.qrcode-img-wrap{width:162px ;height: 162px;margin: 20px auto;}
	.qrcode-img-wrap img{display: block;width:100% ;height: 100%;}
	.dialog-content-tips{padding: 0 25px 15px;}
	.dialog-bg{position: fixed;top: 0;left: 0;bottom: 0;right:0;background-color: rgb(0, 0, 0);opacity: 0.3;z-index: -1;}
</style>